<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="auto"
      size="medium"
      class="ry_form">
      <el-form-item label="UID" prop="uid">
        <el-input v-model="queryParams.uid" placeholder="请输入UID" size="small" />
      </el-form-item>
      <el-form-item label="充值时间" prop="Time">
        <el-date-picker
          v-model="queryParams.Time"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          size="small"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
          align="right"
          @change="handleChange">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="状态" size="small">
          <el-option
            v-for="dict in statusMap"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item class="flex_one tr">
        <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">查询</el-button>
        <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :style="{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '10px' }">
      <el-col :span="12" :style="{ display: 'flex', alignItems: 'center', gap: '10px' }">
        累计选中<span :style="{ fontSize: '18px', fontWeight: 'bold' }">{{ids.length}}</span>条记录，
        充值金额共<span :style="{ fontSize: '18px', fontWeight: 'bold' }">{{totalAmount}}</span>元,
        赠送金额共<span :style="{ fontSize: '18px', fontWeight: 'bold' }">{{giftAmount}}</span>元
      </el-col>
      <el-col :span="12" :style="{ display: 'flex', justifyContent: 'flex-end' }">
        <el-button
          type="primary"
          icon="el-icon-edit"
          :disabled="!ids.length"
          size="small"
          @click="handleChangeSelect">批量退款</el-button>
      </el-col>
    </el-row>
    <el-table
      v-loading="loading"
      :data="list"
      :selectable="selectable"
      @selection-change="handleSelectionChange"
      cell-class-name="my-cell">
      <el-table-column label="序号" type="index" :index="index => index + 1" />
      <el-table-column prop="activityId" label="充值记录ID" width="100" />
      <el-table-column label="充值时间">
        <template slot-scope="scope">
          <span>{{scope.row.activityStartTime}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="activityId" label="充值金额" />
      <el-table-column prop="activityId" label="赠送金额" />
      <el-table-column label="状态">
        <template slot-scope="scope">
          <span>{{scope.row.activityStartTime}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="id" label="创建人" />
      <el-table-column label="操作" class-name="small-padding fixed-width" width="220" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleDetail(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <InBody v-show="total>0">
      <pagination
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </InBody>
  </div>
</template>

<script>
import dateUtil from '@/utils/DateUtil';
import { mapGetters } from "vuex";

export default {
  computed: {
    ...mapGetters(['userId'])
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 时间配置
      pickerOptions: {
        shortcuts: dateUtil.getTimeShort2()
      },
      ids: [],
      totalAmount: 0,
      giftAmount: 0,
      selectable: false,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        uid: '',
        status: '',
        Time: [],
        createStartTime: '',
        createEndTime: ''
      },
      statusMap: [
        { label: '成功', value: 1 },
        { label: '失败', value: 2 },
        { label: '退款', value: 3 }
      ]
    };
  },
  async created() {
    this.getList().catch()
  },
  methods: {
    // 批量退款
    handleChangeSelect() {},
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
    },
    indexMethod(index) {
      return index + 1;
    },
    // TODO 详情
    async handleDetail (recode) {
    },
    /** TODO 查询订单表列表 */
    async getList() {
      // if (this.queryParams.Time) {
      //   this.queryParams.createStartTime = this.queryParams.Time[0]
      //   this.queryParams.createEndTime = this.queryParams.Time[1]
      // }
      // const queryParams = omit(this.queryParams, ['Time'])
      // const { code, rows, total } = await queryRechargeList(queryParams)
      // if (code !== 200) return;
      // this.list = rows
      // this.total = +total
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      Object.assign(this.$data.queryParams, this.$options.data().queryParams)
      this.handleQuery();
    },
    // 时间搜索条件change方法
    handleChange(value) {
      if (!value) {
        this.queryParams.createStartTime = '';
        this.queryParams.createEndTime = '';
      } else {
        this.queryParams.createStartTime = value[0];
        this.queryParams.createEndTime = value[1];
      }
      this.handleQuery();
    }
  }
};
</script>
<style lang="scss">
.product-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 340px;

  .product-item {
    margin: auto;
    width: 290px;

    .sp-data {
      font-size: 13px;
    }

    .quantity {
      font-weight: bold;
      font-size: 13px;
    }
  }
}

.note-title {
  font-weight: bold;
}

.el-table .my-cell {
  vertical-align: top
}

.el-link.el-link--default {
  color: #409eff;
}

.el-select {
  width: 100%;
}
.file-uploader {
  width: 178px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;

  &:hover {
    border-color: #409EFF;
    i {
      color: #409EFF;
    }
  }

  .file-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .file {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>
